<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<meta name="renderer" content="webkit">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>按钮组 | 表单</title>
    <link rel="stylesheet" href="../../assets/dest/css/basic_reset.css">
    <link rel="stylesheet" href="../../assets/dest/css/basic_font.css">
    <link rel="stylesheet" href="../../assets/dest/css/basic_icon.css">
	<link rel="stylesheet" href="../../assets/dest/css/form_button.css?20180426">
	<link rel="stylesheet" href="../../assets/dest/css/form_button_group.css?20180427">
	<link rel="stylesheet" href="../demo-lib/doc.css">
</head>
<body>
	<div class="header">
		<dl>
			<dt>项目：</dt>
			<dd>按钮组</dd>
			<dt>描述：</dt>
			<dd>提供包含一组按钮的容器，常用于状态、模式切换操作。</dd>
			<dt>资源：</dt>
			<dd>
				<code>basic_reset.css</code>
				<code>basic_font.css</code>
				<code>form_button.css</code>
				<code>form_button_group.css</code>
			</dd>
		</dl>
	</div>
	<div class="mainbox">
		<div class="c-btn-group">
			<button class="o-btn o-btn-normal">按钮1</button>
			<button class="o-btn o-btn-normal">按钮2</button>
			<button class="o-btn o-btn-normal">按钮3</button>
			<button class="o-btn o-btn-normal">按钮4</button>
		</div>
		<hr>
		<h4>应用示例：</h4>
		<div id="demo">
			<div class="c-btn-group">
				<button class="o-btn o-btn-primary">年</button>
				<button class="o-btn o-btn-normal">月</button>
				<button class="o-btn o-btn-normal">日</button>
			</div>
			<div class="c-btn-group" style="margin-left:10px">
				<button class="o-btn o-btn-normal">
					<i class="icon-map"></i>
					<span>地图模式</span>
				</button>
				<button class="o-btn o-btn-primary">
					<i class="icon-layers"></i>
					<span>3D模式</span>
				</button>
				<button class="o-btn o-btn-normal">
					<i class="icon-image"></i>
					<span>平面图模式</span>
				</button>
			</div>
		</div>
		<hr>
		<h4>分页效果：</h4>
		<div class="c-btn-group">
			<a class="o-btn o-btn-normal" disabled>
				<i class="icon-arrow-left"></i>
				<span>Prev</span>
			</a>
			<a href="javascript:;" class="o-btn o-btn-primary">1</a>
			<a href="javascript:;" class="o-btn o-btn-normal">2</a>
			<a href="javascript:;" class="o-btn o-btn-normal">3</a>
			<a href="javascript:;" class="o-btn o-btn-normal">4</a>
			<a href="javascript:;" class="o-btn o-btn-normal">5</a>
			<a href="javascript:;" class="o-btn o-btn-normal">6</a>
			<a href="javascript:;" class="o-btn o-btn-normal">7</a>
			<a href="javascript:;" class="o-btn o-btn-normal">
				<span>Next</span>
				<i class="icon-arrow-right"></i>
			</a>
		</div>
	</div>

	<script src="../../dist/js/libs/jquery-1.11.3.min.js"></script>
	<script>
		var styles = ['o-btn-normal', 'o-btn-primary'];

		$('#demo').on('click', 'button', function() {
			if (!$(this).hasClass(styles[1])) {
				$(this).parent().children('button.' + styles[1])
					.toggleClass(styles.concat().reverse().join(' '));

				$(this).toggleClass(styles.join(' '));
			}
		});
	</script>
</body>
</html>
